<template>
  <div class="w-[1200px] mx-auto">
    <div class="w-full h-24 mt-5 px-12">
      <span class="text-3xl font-bold mt-8 inline-block">购物车</span>
      <div class="float-right mt-8 bg-rose-500">
        <input class="w-80 h-10 border-2 bg-white border-solid border-rose-500 p-2" type="text" v-model="searchContent">
        <button class="w-24 h-10 bg-rose-500 text-white" @click="getData">搜索</button>
      </div>
    </div>
    <table class="text-center text-base px-10">
      <thead class="h-12">
        <tr>
          <th class="w-[4%]">选择</th>
          <th>图片</th>
          <th>名称</th>
          <th>规格</th>
          <th>单价</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b-2 h-36 hover:bg-rose-50" v-for="(item, index) in productInfoData" :key="item">
          <td>
            <input type="checkbox" :checked="item.select" @click="item.select = !item.select">
          </td>
          <td class="w-40">
            <img class="w-32 h-32 mx-4" :src="`http://127.0.0.1:8081${item.productImage}`">
          </td>
          <td class="w-96">{{ item.productName }}</td>
          <td class="w-64">{{ item.spec }}</td>
          <td class="w-32 font-bold">￥{{ item.sellPrice }}</td>
          <td class="w-32">
            <button
              class="h-7 w-7 border-2 border-solid border-zinc-200 hover:border-rose-300 mx-2 disabled:border-white disabled:text-white"
              @click="cut(item)" :disabled="item.quantity == 1">-</button> {{ item.quantity }} <button
              class="h-7 w-7 border-2 border-solid border-zinc-200 hover:border-rose-300 mx-2 disabled:border-white disabled:text-white"
              @click="add(item)">+</button>
          </td>
          <td class="w-32"><button class="w-24 h-10 border-2 border-solid border-zinc-200 hover:border-rose-300"
              @click="deleteCart(item.cartId)">删除</button></td>
        </tr>
      </tbody>
    </table>
    <div class="w-full h-20 mt-5">
      <input class="text-lg float-right w-24 h-10 text-white rounded-xl bg-rose-500 hover:bg-rose-400" type="submit"
        value="支付" @click="pay(this.newArr)">
      <span class="text-xl block h-10 leading-10 float-right mr-10">总计金额：￥{{ getTotalPrice }}</span>
      <span class="text-xl  block h-10 leading-10  float-right mr-10">已选个数：{{ getTotal }}</span>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      searchContent: '',
      newArr: [],
      productInfoData: [],
      totalPrice: 0
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      axios( {
        url: 'http://127.0.0.1:8081/api/selectCartByUserId',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "userToken" ),
          userName: window.localStorage.getItem( "userName" ),
          productName: this.searchContent
        }
      } ).then( res => {
        if ( res.data.success === false ) {        // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "userToken" )     // 删除卡片，跳转到登录页面
          this.$router.push( { path: '/login' } )
        } else {
          this.productInfoData = res.data.data.productInfoList
        }
      } )
    },
    // 删除购物车
    deleteCart( cartId ) {
      axios( {
        url: 'http://127.0.0.1:8081/api/deleteCart',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "userToken" ),
          cartId: cartId,
        }
      } ).then( res => {
        if ( res.data.success === false ) {        // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "userToken" )     // 删除卡片，跳转到登录页面
          this.$router.push( { path: '/login' } )
        } else {
          this.$message.success( res.data.message )
          this.getData()
        }
      } )
    },
    // 数量加
    add( item ) {
      item.quantity += 1
      axios( {
        url: 'http://127.0.0.1:8081/api/updateCartNumInc',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "userToken" ),
          cartId: item.cartId,
        }
      } ).then( res => {
        if ( res.data.success === false ) {        // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "userToken" )     // 删除卡片，跳转到登录页面
          this.$router.push( { path: '/login' } )
        } else {
        }
      } )
    },
    // 数量减
    cut( item ) {
      item.quantity -= 1
      axios( {
        url: 'http://127.0.0.1:8081/api/updateCartNumDec',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "userToken" ),
          cartId: item.cartId,
        }
      } ).then( res => {
        if ( res.data.success === false ) {        // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "userToken" )     // 删除卡片，跳转到登录页面
          this.$router.push( { path: '/login' } )
        } else {
        }
      } )
    },
    // 支付
    pay( Arr ) {
      console.log( Arr )
      if ( Arr.length === 0 ) {
        alert( "未选商品" )
      } else {
        this.$router.push( {
          name: 'pay',
          query: {
            row: JSON.stringify( Arr ),
            totalPrice: this.totalPrice
          }
        } )
      }
    }
  },
  computed: {
    getTotalPrice() {
      this.newArr = this.productInfoData.filter( ( val ) => val.select === true )
      var totalPrice = 0;
      for ( var i = 0; i < this.newArr.length; i++ ) {
        totalPrice += this.newArr[ i ].quantity * this.newArr[ i ].sellPrice
      }
      this.totalPrice = totalPrice
      return totalPrice.toFixed( 2 )
    },
    getTotal() {
      var total = 0;
      for ( var i = 0; i < this.newArr.length; i++ ) {
        total += this.newArr[ i ].quantity
      }
      return total
    }
  }

}
</script>

<style scoped></style>